import React from 'react';
import styles from './index.less';
import top from './top.png';
import { useDispatch, useLocation, useSelector } from 'dva';
import searchIcon from '../../assets/search/searchIcon.png';
import { useIntl, getLocale } from 'umi';
import { Tabs, Toast } from 'antd-mobile';
import { getVenuesList } from '../../servers/service.js';
import InViewPort from '../../components/InViewPort';

export default (props) => {
  const { venues = [] } = useSelector(({ index }) => index);
  const dispatch = useDispatch();
  const intl = useIntl();
  const [list, setList] = React.useState([]);
  const [searchvalue, setSearchValue] = React.useState('');
  const [pagination, setPagination] = React.useState({ page: 0, size: 10, total: 0 });
  const [tabIndex, setTabIndex] = React.useState(0);

  React.useEffect(() => {
    dispatch({ type: 'index/getVenues', payload: {}, isReset: true });
  }, []);

  const lang = () => getLocale()?.split('-')[0]?.toUpperCase();

  const getTargetList = ({ id }) => {
    Toast.loading('loading...', 0);
    getVenuesList(
      `exhibitors?enabled=true&approved=true&approveResult=APPROVED&venue.id=${id}&language=${lang()}&page=${
        pagination.page
      }&size=${pagination.size}&sort=sequence%2CDESC`,
    )
      .then(({ content, totalElements }) => {
        setPagination((prevState) => ({ ...prevState, total: totalElements }));
        setList((list) => [...list, ...content]);
      })
      .finally(() => Toast.hide());
  };

  React.useEffect(() => {
    if (Boolean(venues.length)) {
      const { id } = venues[tabIndex];
      getTargetList({ id });
    }
  }, [venues, tabIndex, pagination.page]);

  const handleSearch = (list, value) => {
    if (!value) return list;
    return list.filter((item) => (item.name + item.city).indexOf(value) !== -1);
  };

  const onEnter = () => {
    if (!!list.length && list.length < pagination.total) {
      setPagination((prevState) => ({ ...prevState, page: prevState.page + 1 }));
    }
  };

  const onChange = ({ i }) => {
    setTabIndex(i);
    setList([]);
    setPagination({ page: 0, size: 10 });
  };

  return (
    <div className={styles.page}>
      <div className={styles.top}>
        <img src={top} alt="" />
        <div className={styles.searchBox}>
          <input
            placeholder={intl.formatMessage({ id: 'SEARCH_KEYWORDS' })}
            onChange={({ target: { value } }) => setSearchValue(value)}
          />
          <img src={searchIcon} />
        </div>
      </div>
      <div className={styles.bottom}>
        <Tabs
          initialPage={tabIndex}
          tabs={venues.map((item, i) => ({ ...item, title: item.number, i }))}
          onChange={onChange}
        >
          {venues.map((item, key) => {
            return (
              <div key={key} className={styles.list}>
                {handleSearch(list, searchvalue)?.map((item, key) => {
                  return (
                    <div
                      key={key}
                      className={styles.item}
                      onClick={() => props.history.push(`/index/exhibitorDetail/${item.id}`)}
                    >
                      <div className={styles.img}>
                        <img src={item?.properties?.coverImage} alt="" />
                      </div>
                      <div className={styles.des}>
                        <div>
                          <img src={item?.properties?.logo} alt="" />
                          <span>{lang() === 'ZH' ? item.name : item.nameEn}</span>
                        </div>
                        {/* <div>{item?.city || item?.province}</div> */}
                      </div>
                    </div>
                  );
                })}
                <InViewPort onEnter={onEnter} />
              </div>
            );
          })}
        </Tabs>
      </div>
    </div>
  );
};
